<template>
  <div class="damage-info">
    <div v-if="damageTypeName !== '水毁' ">
      <i class="el-icon-s-help"></i>发育特征
      <el-row>
        <el-col :span="6">
          <p><i class="el-icon-caret-right left-ten"></i>长度：{{damage.item.length}}m</p>
        </el-col>
        <el-col :span="6">
          <p><i class="el-icon-caret-right left-ten"></i>宽度：{{damage.item.width}}m</p>
        </el-col>
        <el-col :span="6" v-if="damageTypeName !== '沉陷与塌陷'">
          <p><i class="el-icon-caret-right left-ten"></i>高度：{{damage.item.height}}m</p>
        </el-col>
        <el-col :span="6" v-if="damageTypeName !== '泥石流' && damageTypeName !== '沉陷与塌陷'">
          <p><i class="el-icon-caret-right left-ten"></i>体积：{{damage.item.volume}}m³</p>
        </el-col>
      </el-row>
      <div v-if="damageTypeName !== '泥石流' && damage.crackNameList.length > 0">
        <i class="el-icon-s-help"></i>裂缝
        <p>
             <span v-for="item in damage.crackNameList" :key="item"
                   style="display: inline-block;margin-left: 10px">
               <i class="el-icon-caret-right" style="margin-right: 1px;color:#ff0000"></i>{{item}}
                                  </span></p>
        <p style="margin-left: 20px" v-if="damage.crackOther">其他裂缝情况：{{damage.crackOther}}</p>
      </div>
    </div>

    <div v-if="influenceType === '路基路面'">
      <p><i class="el-icon-s-help"></i>起止桩号：{{roadEffect.startPointStakeNum}} ~
        {{roadEffect.endPointStakeNum}}</p>
      <p><i class="el-icon-caret-right left-ten"></i>长度：{{roadEffect.length}}m</p>
      <p><i class="el-icon-caret-right left-ten"></i>宽度：{{roadEffect.width}}m</p>
    </div>


    <div v-if="isShowBase2(influenceType)">
      <i class="el-icon-s-help"></i>影响范围
      <p>
             <span v-for="item in roadEffect.enumNameList" :key="item"
                   style="display: inline-block;margin-left: 10px">
                                      <i class="el-icon-caret-right" style="margin-right: 1px;color:#ff0000"></i>{{item}}
                                  </span></p>
      <p style="margin-left: 20px" v-if="roadEffect.remark">其他影响：{{roadEffect.remark}}</p>
    </div>

    <div v-if="isShowBase(influenceType)">
      <p><i class="el-icon-s-help "></i>位置信息：{{roadEffect.location}}</p>
    </div>

    <div v-if="influenceType === '取/弃土场'">
      <p><i class="el-icon-s-help "></i>影响施工机械：{{roadEffect.machine}}</p>
      <p><i class="el-icon-s-help "></i>影响人数：{{roadEffect.people}}</p>
    </div>

    <div v-if="influenceType === '施工便道'">
      <p><i class="el-icon-s-help "></i>断道情况：{{roadEffect.trafficTypeName}}</p>
      <p><i class="el-icon-s-help "></i>影响长度：{{roadEffect.length}}m</p>
    </div>

    <div v-if="influenceType === '临时驻地'">
      <p><i class="el-icon-s-help "></i>驻地类型：{{roadEffect.placeType}}</p>
      <p><i class="el-icon-s-help "></i>影响人数：{{roadEffect.people}}</p>
    </div>

    <div v-if="influenceType === '周边建筑物'">
      <p><i class="el-icon-s-help "></i>建（构）筑物类型：{{roadEffect.buildingTypeName}}</p>
      <p><i class="el-icon-s-help "></i>建（构）筑物规模：{{roadEffect.scale}}</p>
    </div>

    <div v-if="influenceType === '周边住户'">
      <p><i class="el-icon-s-help "></i>是否有住户：{{roadEffect.hasHouseholdName}}</p>
      <p><i class="el-icon-s-help "></i>是否影响住户：{{roadEffect.influenceName}}</p>
      <p v-if="roadEffect.people"><i class="el-icon-s-help "></i>影响户数：{{roadEffect.house}}</p>
      <p v-if="roadEffect.house"><i class="el-icon-s-help "></i>影响人数：{{roadEffect.people}}</p>
    </div>
  </div>


</template>
<script>
export default {
  props: ['value', 'influenceType', 'currentRow'],
  data() {
    return {
      crackNameList: [],
      baseList: ['取/弃土场', '施工便道', '临时驻地', '周边建筑物'],
      baseList2: ['排水设施', '坡面防护', '沿河防护', '支挡设施', '桥梁涵洞', '隧道']
    }
  },
  methods: {
    isShowBase(influenceType) {
      return this.baseList.indexOf(influenceType) > -1
    },
    isShowBase2(influenceType) {
      return this.baseList2.indexOf(influenceType) > -1
    },
  },
  mounted() {

  },
  created() {
  },
  computed: {
    damageTypeName() {
      return this.currentRow.damageTypeName
    },
    damage() {
      switch (this.currentRow.damageTypeName) {
        case '崩塌':
          return this.currentRow.damage.collapse
        case '滑坡':
          return this.currentRow.damage.landslide
        case '泥石流':
          return this.currentRow.damage.debrisFlow
        case '沉陷与塌陷':
          return this.currentRow.damage.settlement
        case '水毁':
          return this.currentRow.damage.water
        default:
          return {}
      }
    },
    roadEffect() {
      switch (this.influenceType) {
        case '路基路面':
          return this.currentRow.roadEffect.fillSubgrade ? this.currentRow.roadEffect.fillSubgrade : {}
        case '坡面防护':
          return this.currentRow.roadEffect.slopeProtect ? this.currentRow.roadEffect.slopeProtect : {}
        case '沿河防护':
          return this.currentRow.roadEffect.riverProtect ? this.currentRow.roadEffect.riverProtect : {}
        case '支挡设施':
          return this.currentRow.roadEffect.retainingFacilities ? this.currentRow.roadEffect.retainingFacilities : {}
        case '桥梁涵洞':
          return this.currentRow.roadEffect.bridgeCulvert ? this.currentRow.roadEffect.bridgeCulvert : {}
        case '隧道':
          return this.currentRow.roadEffect.tunnel ? this.currentRow.roadEffect.tunnel : {}
        case '排水设施':
          return this.currentRow.roadEffect.drainage ? this.currentRow.roadEffect.drainage : {}
        case '取/弃土场':
          return this.currentRow.roadEffect.field ? this.currentRow.roadEffect.field : {}
        case '施工便道':
          return this.currentRow.roadEffect.traffic ? this.currentRow.roadEffect.traffic : {}
        case '临时驻地':
          return this.currentRow.roadEffect.place ? this.currentRow.roadEffect.place : {}
        case '周边建筑物':
          return this.currentRow.roadEffect.building ? this.currentRow.roadEffect.building : {}
        case '周边住户':
          return this.currentRow.roadEffect.household ? this.currentRow.roadEffect.household : {}
        default:
          return {}
      }
    },
  }
}
</script>

<style lang="less">
  .left-ten {
    margin-left: 10px;
  }

  .damage-info {
    font-size: 15px;
    margin-left: 10px;
    line-height: 30px;
  }
</style>
